<template>
  <div class="coding-problem-detail" v-if="problem">
    <header>
      <h1>{{ problem.title }}</h1>
      <button @click="goBack" class="back-button">返回题库</button>
    </header>
    <main>
      <div class="problem-info">
        <div class="problem-meta">
          <span class="difficulty" :class="problem.difficulty.toLowerCase()">
            难度：{{ problem.difficulty }}
          </span>
          <span class="tags">
            <span v-for="tag in problem.tags" :key="tag" class="tag">{{
              tag
            }}</span>
          </span>
        </div>
        <div class="problem-stats">
          <span>通过率：{{ problem.passRate }}%</span>
          <span>提交次数：{{ problem.submissions }}</span>
        </div>
        <div class="problem-description" v-html="problem.description"></div>
        <div class="problem-examples">
          <h3>示例：</h3>
          <div
            v-for="(example, index) in problem.examples"
            :key="index"
            class="example"
          >
            <pre><code>{{ example.input }}</code></pre>
            <p>输出：{{ example.output }}</p>
            <p v-if="example.explanation">解释：{{ example.explanation }}</p>
          </div>
        </div>
        <button @click="toggleSolution" class="solution-button">
          {{ showSolution ? '隐藏题解' : '查看题解' }}
        </button>
        <div v-if="showSolution" class="solution">
          <h3>题解：</h3>
          <div v-html="problem.solution"></div>
        </div>
      </div>
      <div class="coding-environment">
        <div class="editor-controls">
          <select v-model="selectedLanguage" class="language-selector">
            <option v-for="lang in languages" :key="lang" :value="lang">
              {{ lang }}
            </option>
          </select>
          <button @click="runCode" class="run-button">运行代码</button>
        </div>
        <textarea
          v-model="code"
          class="code-editor"
          placeholder="在这里编写你的代码"
        ></textarea>
        <div v-if="output" class="output">
          <h3>输出:</h3>
          <pre>{{ output }}</pre>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
// import { useProblemStore } from '../stores/problemStore'
import { useProblemStore } from '@/stores/modules/problemStore'
import { storeToRefs } from 'pinia'

const route = useRoute()
const router = useRouter()
const problemStore = useProblemStore()
const { currentProblem } = storeToRefs(problemStore)

const selectedLanguage = ref('JavaScript')
const code = ref('')
const output = ref('')
const showSolution = ref(false)

const languages = ['JavaScript', 'Python', 'Java', 'C++']

onMounted(() => {
  const problemId = parseInt(route.params.id)
  problemStore.setCurrentProblem(problemId)
})

const goBack = () => {
  router.push('/coding-problems')
}

const runCode = () => {
  // 这里应该是发送代码到后端进行编译和运行
  // 现在我们只是模拟一个输出
  output.value = `运行 ${selectedLanguage.value} 代码:\n${code.value}\n\n模拟输出：代码执行成功！`
}

const toggleSolution = () => {
  showSolution.value = !showSolution.value
}

const problem = currentProblem
</script>
<style scoped>
.coding-problem-detail {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
  color: #333;
  background-color: #ffffff;
}

header {
  background-color: #1e90ff;
  color: white;
  padding: 20px;
  text-align: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 8px;
  margin-bottom: 20px;
}

h1,
h2,
h3 {
  margin: 0;
}

.back-button,
.solution-button {
  background-color: white;
  color: #1e90ff;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.3s ease;
}

.back-button:hover,
.solution-button:hover {
  background-color: #f0f0f0;
}

.problem-info {
  background-color: #f0f8ff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.problem-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.difficulty {
  font-weight: bold;
  padding: 4px 8px;
  border-radius: 4px;
}

.difficulty.简单 {
  background-color: #00af9b;
  color: white;
}

.difficulty.中等 {
  background-color: #ffb800;
  color: white;
}

.difficulty.困难 {
  background-color: #ff2d55;
  color: white;
}

.tags {
  display: flex;
  gap: 8px;
}

.tag {
  background-color: #e0e0e0;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.9em;
}

.problem-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 0.9em;
  color: #666;
}

.problem-description {
  margin-bottom: 20px;
}

.problem-examples {
  margin-bottom: 20px;
}

.example {
  background-color: #f5f5f5;
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.example pre {
  background-color: #e0e0e0;
  padding: 10px;
  border-radius: 4px;
  overflow-x: auto;
}

.solution {
  margin-top: 20px;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.coding-environment {
  background-color: #f5f5f5;
  border-radius: 8px;
  padding: 20px;
}

.editor-controls {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.language-selector {
  padding: 5px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

.run-button {
  background-color: #1e90ff;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.3s ease;
}

.run-button:hover {
  background-color: #1a7ee0;
}

.code-editor {
  width: 100%;
  height: 300px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  font-family: monospace;
  background-color: #2d2d2d;
  color: #ffffff;
  margin-bottom: 20px;
}

.output {
  background-color: #f0f0f0;
  padding: 10px;
  border-radius: 4px;
}

.output pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}

@media (max-width: 768px) {
  header {
    flex-direction: column;
    gap: 10px;
  }

  .back-button {
    width: 100%;
  }

  .problem-meta,
  .problem-stats {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .editor-controls {
    flex-direction: column;
    gap: 10px;
  }

  .language-selector,
  .run-button {
    width: 100%;
  }
}
</style>
